<template>
  <section class="loading-indicator">
    <slot name="icon">
      <svg
        class="icon loading-icon"
        viewBox="0 0 32 32"
      >
        <title>spinner</title>
        <path d="M16 7.904c0 0 0 0-0 0-0.707 0-1.28-0.573-1.28-1.28 0 0 0 0 0-0v0-2.464c0-0.707 0.573-1.28 1.28-1.28s1.28 0.573 1.28 1.28v0 2.464c0 0 0 0 0 0 0 0.707-0.573 1.28-1.28 1.28 0 0 0 0-0 0v0z" />
        <path d="M16 29.12c0 0 0 0-0 0-0.707 0-1.28-0.573-1.28-1.28 0 0 0 0 0-0v0-2.464c0-0.707 0.573-1.28 1.28-1.28s1.28 0.573 1.28 1.28v0 2.464c0 0 0 0 0 0 0 0.707-0.573 1.28-1.28 1.28 0 0 0 0-0 0v0z" />
        <path d="M6.624 17.28h-2.464c-0.707 0-1.28-0.573-1.28-1.28s0.573-1.28 1.28-1.28v0h2.464c0.707 0 1.28 0.573 1.28 1.28s-0.573 1.28-1.28 1.28v0z" />
        <path d="M27.84 17.28h-2.464c-0.707 0-1.28-0.573-1.28-1.28s0.573-1.28 1.28-1.28v0h2.464c0.707 0 1.28 0.573 1.28 1.28s-0.573 1.28-1.28 1.28v0z" />
        <path d="M11.279 9.18c-0 0-0.001 0-0.001 0-0.469 0-0.88-0.253-1.102-0.63l-0.003-0.006-1.241-2.129c-0.109-0.185-0.174-0.407-0.174-0.645 0-0.707 0.573-1.28 1.28-1.28 0.469 0 0.88 0.253 1.103 0.63l0.003 0.006 1.241 2.129c0.109 0.185 0.174 0.407 0.174 0.644 0 0.707-0.572 1.279-1.279 1.28h-0z" />
        <path d="M21.964 27.509c-0 0-0.001 0-0.001 0-0.469 0-0.88-0.253-1.102-0.63l-0.003-0.006-1.241-2.129c-0.109-0.185-0.174-0.407-0.174-0.645 0-0.707 0.573-1.28 1.28-1.28 0.469 0 0.88 0.253 1.103 0.63l0.003 0.006 1.241 2.129c0.109 0.185 0.174 0.407 0.174 0.644 0 0.707-0.572 1.279-1.279 1.28h-0z" />
        <path d="M5.772 23.243c-0 0-0.001 0-0.001 0-0.707 0-1.28-0.573-1.28-1.28 0-0.469 0.253-0.88 0.629-1.103l0.006-0.003 2.129-1.241c0.185-0.109 0.407-0.174 0.645-0.174 0.707 0 1.28 0.573 1.28 1.28 0 0.469-0.253 0.88-0.63 1.103l-0.006 0.003-2.129 1.241c-0.184 0.11-0.406 0.174-0.643 0.174-0 0-0 0-0 0v0z" />
        <path d="M24.102 12.558c-0 0-0.001 0-0.001 0-0.707 0-1.28-0.573-1.28-1.28 0-0.469 0.253-0.88 0.629-1.103l0.006-0.003 2.129-1.241c0.185-0.109 0.407-0.174 0.645-0.174 0.707 0 1.28 0.573 1.28 1.28 0 0.469-0.253 0.88-0.63 1.103l-0.006 0.003-2.129 1.241c-0.184 0.11-0.406 0.174-0.643 0.174-0 0-0 0-0 0v0z" />
        <path d="M7.878 12.593c-0 0-0 0-0 0-0.235 0-0.455-0.064-0.645-0.175l0.006 0.003-2.134-1.232c-0.385-0.225-0.64-0.637-0.64-1.108 0-0.707 0.573-1.28 1.28-1.28 0.236 0 0.456 0.064 0.646 0.175l-0.006-0.003 2.134 1.232c0.385 0.225 0.64 0.637 0.64 1.109 0 0.707-0.573 1.28-1.28 1.28-0 0-0.001 0-0.001 0h0z" />
        <path d="M26.253 23.199c-0 0-0 0-0 0-0.235 0-0.455-0.064-0.645-0.175l0.006 0.003-2.134-1.232c-0.386-0.225-0.642-0.638-0.642-1.11 0-0.707 0.573-1.28 1.28-1.28 0.236 0 0.458 0.064 0.648 0.176l-0.006-0.003 2.134 1.232c0.385 0.225 0.64 0.637 0.64 1.109 0 0.707-0.573 1.28-1.28 1.28-0 0-0.001 0-0.001 0h0z" />
        <path d="M10.080 27.535c-0.706-0.001-1.279-0.574-1.279-1.28 0-0.236 0.064-0.456 0.175-0.646l-0.003 0.006 1.232-2.134c0.225-0.386 0.637-0.641 1.109-0.641 0.707 0 1.28 0.573 1.28 1.28 0 0.236-0.064 0.457-0.175 0.647l0.003-0.006-1.232 2.134c-0.225 0.385-0.637 0.64-1.108 0.64-0 0-0.001 0-0.001 0h0z" />
        <path d="M20.686 9.16c-0.706-0.001-1.279-0.574-1.279-1.28 0-0.236 0.064-0.456 0.175-0.646l-0.003 0.006 1.232-2.134c0.225-0.385 0.637-0.64 1.108-0.64 0.707 0 1.28 0.573 1.28 1.28 0 0.236-0.064 0.456-0.175 0.646l0.003-0.006-1.232 2.134c-0.225 0.385-0.637 0.64-1.108 0.64-0 0-0.001 0-0.001 0h0z" />
      </svg>
    </slot>
    <span>
      <slot>
        {{ loadingText }}
      </slot>
    </span>
  </section>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'loading-indicator',

  props: {
    loadingText: {
      type:    String,
      default: '',
    },
  },
});
</script>

<style lang="scss" scoped>
  .loading-indicator {
    display: flex;
    align-items: center;
    gap: 0.25rem;

    span {
      line-height: 2rem;
      color: var(--primary);
    }

    path {
      fill: var(--primary);
    }
  }

  .icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .loading-icon {
    animation:spin 4s linear infinite;
  }

  @keyframes spin {
    100% {
      transform: rotate(360deg);
    }
  }

</style>
